<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<!-- <style type="text/css">
    .red {
        background-color: red;
        width: 500px;
        height: 500px;
    }
    
</style> -->

<body>
    <ul>
        <li id="tim1">作文1</li>
        <li id="tim2">作文2</li>
        <li id="tim3">作文3</li>
        <li id="tim4">作文4</li>
        <li id="tim5">作文5</li>
    </ul>
    <!-- <div></div>
    <div></div> -->
    <script>
        // function getSibilings(node) {
        //     var allChildren = node.parentNode.children  //获取这个元素的所有兄弟姐妹
        //     var array = { length: 0 }                    
        //     for (let i = 0; i < allChildren.length; i++) {      
        //         if (allChildren[i] !== node) {                
        //             array[array.length] = allChildren[i]
        //             array.length += 1                   
        //         }
        //     }
        //     return array
        // }

        function addClass(node,classes) {
            for (let key in classes) {
                let value = classes[key]
                if (value) {                      //这五行代码可以写成
                    node.classList.add(key)       //let madeClass = (value) ? add : remove
                } else {                          // node.classList[madeClass](key)
                    node.classList.remove(key)   
                }
            }
        }

        window.wwNode = {}   //命名空间
        // wwNode.getSibilings = getSibilings
        wwNode.addClass = addClass

        // wwNode.xxx(tim4)

        //上面代码用扩展 Node 接口直接在 Node.prototype 上加函数
        // Node.prototype.allSiblings = function () {
        //     var allChildren = this.parentNode.children  //获取这个元素的所有兄弟姐妹
        //     var array = { length: 0 }
        //     for (let i = 0; i < allChildren.length; i++) {
        //         if (allChildren[i] !== this) {
        //             array[array.length] = allChildren[i]
        //             array.length += 1
        //         }
        //     }
        //     return array
        // }

        // Node.prototype.allClass = function (classes) {
        //     for (let key in classes) {
        //         let value = classes[key]
        //         let madeClass = value ? 'add' : 'remove'
        //         this.classList[madeClass](key)
        //     }
        // }

        // tim3.allSiblings()  // 没有call是隐式指定this  等价于  tim3.allsiblings.call()  
        // tim3.allClass({ 'a': true })   //等价于  tim3.allClass.call(tim3,{'a':true}) 

        // 新的接口 BetterNode 
        // window.jQuery = function (node) {
        //     return {
        //         allsiblings: function () {
        //             var allChildren = node.parentNode.children  //获取这个元素的所有兄弟姐妹
        //             var array = { length: 0 }
        //             for (let i = 0; i < allChildren.length; i++) {
        //                 if (allChildren[i] !== node) {
        //                     array[array.length] = allChildren[i]
        //                     array.length += 1
        //                 }
        //             }
        //             return array
        //         },
        //         allClass: function (classes) {
        //             for (let key in classes) {
        //                 let value = classes[key]
        //                 let madeClass = value ? 'add' : 'remove'
        //                 node.classList[madeClass](key)
        //             }
        //         }
        //     }
        // }
        // var Node2 = jQuery(tim3)  //jQuery接受一个旧的节点，返回一个新的对象，新的对象由新的API，这个对象就是jQuery的对象
        // Node2.allsiblings()
        // Node2.allClass()

        //确定是节点还是字符串
        // window.jQuery = function (nodeOrSelector) {
        //     let nodes
        //     if (nodeOrSelector === 'string') {
        //         let temp = document.querySelector(nodeOrSelector)
        //         for( let i=0; i< temp.length;i++ ){
        //             nodes[i] = temp[i]
        //             node.length = temp.length
        //         }else if(nodeOrSelector instanceof Node){
        //             nodes = {
        //                 0 : nodeOrSelector,
        //                 length :1
        //             }
        //         }
        //     }
        // }


        // window.jQuery = function (nodeOrSelector) {
        //     let nodes = {}
        //     if (typeof nodeOrSelector === 'string') {
        //         let temp = document.querySelectorAll(nodeOrSelector)
        //         for (let i = 0; i < temp.length; i++) {
        //             nodes[i] = temp[i]
        //         }
        //         nodes.length = temp.length
        //     } else if (nodeOrSelector instanceof Node) {
        //         nodes = {
        //             0: nodeOrSelector,
        //             length: 1
        //         }
        //     }
        //     nodes.addClass = function (classes) {
        //         classes.forEach((value) => {
        //             for (let i = 0; i < nodes.length; i++) {
        //                 nodes[i].classList.add(value)
        //             }
        //         })
        //     }
        //     nodes.setText = function (text) {
        //         if(text === undefined){
        //             var texts = []
        //             for(let i=0; i<nodes.length;i++){
        //                 texts.push(nodes[i].textContent)
        //             }
        //             return texts
        //         }else {
        //             for(let i = 0; i < nodes.length; i++){
        //                 nodes[i].textContent = text
        //             }
        //         }
        //     }
        //     return nodes
        // }
        // var node2 = jQuery('ul>li')
        // node2.addClass(['red']) // 可将所有 div 的 class 添加一个 red
        // console.log(node2.getText())

        window.jQuery = function (nodeOrSelector) {     获取节点或字符串
            let $nodes = {}                             //初始化一个空对象，将之后字符串或数组放进去
            if (typeof nodeOrSelector === 'string') {   //识别输入的是节点还是字符串
                let temp = document.querySelectorAll(nodeOrSelector)
                for (let i = 0; i < temp.length; i++) {
                    $nodes[i] = temp[i]
                }
                $nodes.length = temp.length
            } else if (nodeOrSelector instanceof Node) {     //如果是节点那么久把它放入伪数组
                nodes = {
                    0: nodeOrSelector,
                    length: 1
                }
            }
            $nodes.addClass = function (classes) {      //获取参数，遍历找到相关节点，给相关节点添加value
                classes.forEach((value) => {
                    for (let i = 0; i < $nodes.length; i++) {
                        $nodes[i].classList.add(value)
                    }
                })
            }
            $nodes.setText = function (text) {
                if (text === undefined) {               //如果文本为空，则添加文本
                    var texts = []
                    for (let i = 0; i < $nodes.length; i++) {
                        texts.push($nodes[i].textContent)
                    }
                    return texts
                } else {                      //否则输出文本内容
                    for (let i = 0; i < $nodes.length; i++) {
                        $nodes[i].textContent = text
                    }
                }
            }
            return $nodes
        }
        window.$ = jQuery
        var $div = $('div')
        $div.addClass(['red']) // 可将所有 div 的 class 添加一个 red
        $div.setText('hi') // 可将所有 div 的 textContent 变为 hi

    </script>
</body>

</html>